<template>
	<!-- 创建编辑新考试 -->
	<div class="addExamMain">
		<div class="addExamContent">
			<h3>{{addexamtype==1?'编辑考试':'创建考试'}}</h3>
			<ul>
				<li>
					<span>添加考试名称：</span>
					<div class="inputBox">
						<el-input v-model="addinfo.name" placeholder="请输入内容" @input="handleInput"></el-input>
					</div>
				</li>
				<li>
					<span>添加考试时间：</span>
					<div class="inputBox">
						<el-date-picker
						  v-model="addexamtime"
						  type="daterange"
						  range-separator="至"
						  start-placeholder="开始日期"
						  end-placeholder="结束日期"
						  :default-time="['00:00:00', '23:59:59']">
						</el-date-picker>
					</div>
				</li>
				<li>
					<span>考试类型：</span>
					<div class="inputBox">
						<el-select v-model="addinfo.examType" placeholder="请选择">
						  <el-option
							v-for="item in examclassify"
							:key="item.id"
							:label="item.name"
							:value="item.id">
						  </el-option>
						</el-select>
					</div>
				</li>
				<li>
					<span>考试模式：</span>
					<div class="inputBox">
						<el-select v-model="addinfo.optionalName" placeholder="请选择">
						  <el-option
							v-for="item in exammodel"
							:key="item.name"
							:label="item.name"
							:value="item.name">
						  </el-option>
						</el-select>
					</div>
				</li>
				<li>
					<span>评阅方式：</span>
					<div class="inputBox">
						<el-select v-model="addinfo.markHubType" placeholder="请选择">
						  <el-option
							v-for="item in yyfsmodel"
							:key="item.id"
							:label="item.name"
							:value="item.id">
						  </el-option>
						</el-select>
					</div>
				</li>
				<li>
					<span>选择考试科目：</span>
					<div class="inputBox1">
						<el-select v-model="addinfo.courses" multiple placeholder="请选择"  @change="handleChange">
							<el-option
							  v-for="item in subjectlist"
							  :key="item.id"
							  :label="item.name"
							  :value="item.id">
							</el-option>
						  </el-select>
					  </div>
					  <b class="bcontentcolor" @click="$router.push('/subjectmanagement')">新增科目</b>
				</li>
				<li style="color:red;" v-if="attentionIshow">
					<span></span>
					<i class="el-icon-warning-outline" style="margin-right:5px;"></i>{{attention}}
				</li>
			</ul>
			<div class="groupbutton">
				<el-button type="primary" @click="surebc">保存</el-button>
				<el-button type="primary" @click="goback">返回</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	import { get, post, del, put } from '../../request/api.js'
	export default{
		props:['examobj','addexamtype'],
		data(){
			return{
				subjectlist:[],
				attentionIshow:false,
				gradelist:['高一','高二','高三'],
				addinfo:{
				  id: 0,
				  name: "",
				  examType: '',
				  startTime: "",
				  endTime: "",
				  markHubType: '',
				  optionalId: 0,
				  optionalName: "",
				  isEnable: true,
				  courses: [],
				  description: ""
				},
				titleshow:null,
				addexamtime:'',
				addswidth:false,	
				examclassify:[
					{
						id:1,
						name:'普通'
					},
					{
						id:2,
						name:'月考'
					},
					{
						id:3,
						name:'期中'
					},
					{
						id:4,
						name:'期末'
					}
				],
				exammodel:[],
				yyfsmodel:[
					{
						id:1,
						name:'全校阅卷'
					},
					{
						id:2,
						name:'分班阅卷'
					},
					{
						id:3,
						name:'导入成绩'
					},
					{
						id:4,
						name:'先批后扫'
					},
					{
						id:5,
						name:'线上考试'
					}
				],
				examobjcontent:{}
			}
		},
		mounted() {
			if(this.examobj){
				this.addinfo = this.examobj
				this.addinfo.courses = this.examobj.examCourses.map(course => course.coursesId)
				this.addexamtime = [JSON.parse(sessionStorage.getItem('examContent')).startTime,JSON.parse(sessionStorage.getItem('examContent')).endTime]
			}
			this.subjectlisttab()
			this.exammodeltab()
		},
		methods:{
			handleChange() {
			      this.$forceUpdate(); // 强制更新组件
			    },
			handleInput(value) {
			   const filteredValue = value.replace(/[^\u4e00-\u9fa5a-zA-Z0-9\s\-_]/g, '');
				// 这里使用 $nextTick 确保 DOM 更新后再设置值，避免光标位置问题
				this.$nextTick(() => {
				  this.addinfo.name = filteredValue;
				});
			},
			// 获取科目列表
			subjectlisttab(){
				get('/course/alllist')
				.then(res=>{
					//console.info(res)
					if(res.code==200){
						this.subjectlist = res.data
					}else{
						this.$message.error(res.message);
					}
				})
				.catch(error=>{
					this.$message.error(error.message);
				})
			},
			//获取考试模式
			exammodeltab(){
				get('/optional/list')
				.then(res=>{
					//console.info(res)
					if(res.code==200){
						this.exammodel = res.data
					}else{
						this.$message.error(res.message);
					}
				})
				.catch(error=>{
					this.$message.error(error.message);
				})
			},
			//保存
			surebc(){
				// //console.info(this.addinfo.fullMark)
				if(this.addinfo.name==''){
					this.attentionIshow = true
					this.attention='请添加考试名称'
					return false
				}else if(!this.addexamtime){
					this.attentionIshow = true
					this.attention='请添加考试时间'
					return false
				}else if(this.addinfo.examType==''){
					this.attentionIshow = true
					this.attention='请选择考试类型'
					return false
				}else if(this.addinfo.optionalName==''){
					this.attentionIshow = true
					this.attention='请选择考试模式'
					return false
				}else if(this.addinfo.markHubType==''){
					this.attentionIshow = true
					this.attention='请选择评阅方式'
					return false
				}else if(this.addinfo.courses.length<=0){
					this.attentionIshow = true
					this.attention='请选择考试科目'
					return false
				}
				this.addinfo.startTime = this.addexamtime[0]
				this.addinfo.endTime = this.addexamtime[1]
				const optinonid = this.exammodel.filter(item=>item.name==this.addinfo.optionalName)
				this.addinfo.optionalId = optinonid[0].id
				// const filteredData = this.subjectlist.filter(item => this.subjectlistArray.includes(item.id))
				// this.addinfo.courses[0].subjects.push(filteredData)
				// //console.info(this.addinfo)
				// return false
				post('/exam/update', this.addinfo)
				.then(res => {
					if(res.code==200){
						this.$message.success('创建考试成功');
						// // 处理响应数据
						this.addExamIshow = false
						this.$emit('addexamclick',false)
						this.addinfo={
							id: 0,
							name: "",
							examType: '',
							startTime: "",
							endTime: "",
							markHubType: '',
							optionalId: 0,
							optionalName: "",
							isEnable: true,
							courses: [],
							description: ""
						}
						this.addexamtime=''
					}else{
						this.$message.error(res.message);
					}
				})
				.catch(error => {
				  // 处理错误
				  this.$message.error(error.message);
				});
			},
			// 返回
			goback(){
				this.$emit('addexamclick',false)
				this.attentionIshow = false
				this.attention=''
				this.addexamtime = ''
				this.addinfo={
					name:'',
					examType:'',
					startTime:'',
					endTime:[],
					optionalName:'',
					markHubType:'',
					courses:[]
				}
				this.addexamtime=''
			},
		}
	}
</script>

<style scoped>
	.addExamMain{
		position: fixed;
		width:100%;
		height:100%;
		background:rgba(0,0,0,0.5);
		left:0;
		top:0;
		z-index:100;
	}
	.addExamContent{
		width: 584px;
		height: auto;
		background: #FFFFFF;
		box-shadow: 0px 4px 16px 0px rgba(85,114,146,0.1);
		border-radius: 10px;
		position: fixed;
		left:50%;
		top:50%;
		transform: translate(-50%,-50%);
		z-index:2;
		box-sizing: border-box;
		padding:30px;
	}
	.addExamContent h3{
		font-size:18px;
		padding-bottom:20px;
	}
	.addExamContent ul li{
		display: flex;
		align-items: center;
		padding-bottom:14px;
		font-size:14px;
	}
	.addExamContent ul li span{
		font-size:14px;
		width:98px;
		color: #557292;
		text-align: right;
	}
	.addExamContent ul li p{
		position: relative;
	}
	.addExamContent ul li p em{
		position: absolute;
		right:10px;
		top:50%;
		transform: translateY(-50%);
		color:#C0C4CC;
		cursor: pointer;
	}
	.addExamContent ul li >>>.el-input__inner{
		width: 400px;
		height: 34px;
		border-radius: 10px;
		border: 1px solid #D8E4F0;
	}
	.inputBox{
		width: 400px;
	}
	.inputBox1{
		width: 300px;
	}
	.addExamContent ul li div.inputBox1 >>> .el-input__inner{
		width:300px;
		height: 34px;
		border-radius: 10px;
		border: 1px solid #D8E4F0;
	}
	.addExamContent ul li >>> .el-range__icon{
		line-height:27px;
	}
	.groupbutton{
		display: flex;
		align-items: center;
		padding-top:20px;
	}
	.groupbutton >>> .el-button{
		width: 124px;
		height: 34px;
		background: #295CFF;
		border-radius: 10px;
		font-size: 14px;
		color: #FFFFFF;
		padding:0;
	}
	.groupbutton >>> .el-button:last-child{
		background: #F2F6FB;
		border-radius: 10px;
		border: 1px solid #295CFF;
		color:#295CFF;
		margin-left:24px;
	}
	.bcontentcolor{
		font-size:14px;
		color:#295CFF;
		display: inline-block;
		margin-left:20px;
		cursor: pointer;
	}
	.el-checkbox{
		margin-right:8px;
	}
	.infosetcontentfont{
		color:#5B6371
	}
	.addExamContent ul li.infosetcontentfont span{
		width:auto;
		height: 26px;
		border-radius: 4px;
		border: 1px solid #D8E4F0;
		color:#B3B8C2;
		font-size:14px;
		text-align:left;
		line-height:26px;
		padding:0 16px 0 10px;
		margin-left:10px;
	}
	.addExamContent ul li.infosetcontentfont i{
		font-style:normal;
		color:#295CFF;
		padding:0 4px;
	}
	.inputBox1 >>> .el-tag.el-tag--info{
		background: #F2F6FB;
		border: 1px solid #D8E4F0;
		color: #B3B8C2;
	}
	.inputBox1 >>> .el-select .el-tag__close.el-icon-close{
		background:none;
		color:#B3B8C2;
	}
</style>